<template>
	<div class="rask_main">
		<div class="mesg_tit">任务类型</div>
		<div class="main_pdlr10">
			<el-form :inline="true" :model="formRaskSearch" class="raskFormMain">
	        <el-form-item label="类型名称">
	          <el-input v-model="formRaskSearch.typename" placeholder="类型名称"></el-input>
	        </el-form-item>
	        <el-form-item label="状态">
	          <el-select v-model="statusVal" placeholder="全部">
							<el-option
									v-for="item in formRaskSearch.state"
									:key="item.paramValue"
									:label="item.paramName"
									:value="item.paramValue">
								</el-option>
	          </el-select>
	        </el-form-item>
	        <el-form-item class="sear_btnbox">
	          <el-button type="primary" icon="el-icon-search" @click="onQuery">查询</el-button>
	          <el-button type="success" icon="el-icon-circle-plus-outline" @click="handleEdit()">添加</el-button>
	        </el-form-item>
	      </el-form>
	      <el-table
	        :data="raskTable"
	        stripe
	        border
	        style="width: 100%" 
					v-loading="loading">
	       <el-table-column
	          type='index'
	          label="序号"
	          align='center'
	          width="50">
	        </el-table-column>
	        <el-table-column
	          prop="name"
	          label="类型名称"
	          width="120">
	        </el-table-column>
	         <el-table-column
	          prop="statusName"
	          label="状态"
	          width="50">
	        </el-table-column>
	       <el-table-column
	          prop="desc"
	          label="类型描述"
	          >
	        </el-table-column>
	        
	        <el-table-column
	          fixed='right'
	          width="160"
	          align='center'
	          label="操作">
	            <template slot-scope="scope">
	              <el-button
	                size="mini"
	                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
	              <el-button
	              	type="warning"
	                size="mini"
	                @click="handleEditStop(scope.$index, scope.row)">启用/停用</el-button>
	             
	            </template>
	        </el-table-column>
	      </el-table>

	      
	      <div class="block">
	        <el-pagination
	          @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page.sync="currentPageRask"
		        :page-sizes="[5, 10, 20, 30]"
		        :page-size="pageSizeRask"
		        layout="sizes, prev, pager, next"
		        :total="totalRask">
	        </el-pagination>
	      </div>
	  </div>
	  <!-- gm弹框内容gm -->
	  <!-- gm添加任务类型gm -->
    <el-dialog :title="title" 
							 :visible.sync="dialogrask" 
							 center 
							 width="600px" 
							 :close-on-click-modal="false" 
							 :show-close="false">
      <el-form label-width="100px">
        <el-form-item label="类型名称">
					<!-- <el-input key="id" v-model="id" type="hidden"></el-input> -->
          <el-input key="typename" v-model="name" type="text" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="类型描述">
          <el-input  
          :rows="4"
          type="textarea"
					placeholder="请输入内容"
					v-model="desc"
          key="desc" 
          autocomplete="off"
          ></el-input>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogrask = false">取 消</el-button>
        <el-button type="primary" @click="onOk">确 定</el-button>
      </div>
    </el-dialog>
		<!-- gm添加任务类型gm -->
    <!-- gm是否启用gm -->
    <el-dialog title="是否启用" 
							 :visible.sync="dialogstart" 
							 center 
							 width="400px" 
							 :close-on-click-modal="false" 
							 :show-close="false">
      <el-form label-width="100px">
        <el-form-item label="是否启用坐席" >
           <el-radio-group v-model="status">
              <el-radio :label="true" >启用</el-radio>
              <el-radio :label="false">停用</el-radio>
           </el-radio-group>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogstart = false">取 消</el-button>
        <el-button type="primary" @click="onOk2">确 定</el-button>
      </div>
    </el-dialog>
		<!-- gm是否启用gm -->

	</div>
</template>
<script>
import bus from '@/api/bus'
	import {getTaskTypes,saveTaskType,updateTaskType,startStopState} from '@/api'
  export default {
    data() {
      return {
      	roleId:'',
      	dialogrask: false,  //添加或编辑弹出层
      	dialogstart: false, //启用停用弹出层
      	status:true,        //启用-单选选择
       	formRaskSearch: {   //查询条件form
          typename: '', //查询-类型名称
          state: ''     //查询-状态
				},
				statusVal: '', // 状态编号
				id:'',              //id
				name:'',            //类型名称
				desc:'',            //类型描述
				onvalue:0,          //判断编辑添加:编辑值1，添加值0
				raskTable:[],       //表格内容
				state:'',           //启用停用状态 1停用  0启用
				type:'TASK',        //启用停用接口-TASK 是任务类型 COMMUNICATE 是沟通类型
				loading: true,      //加载器
				totalRask: null,// 分页总条数
				pageSizeRask:10, //当前分页一页多少条数
				currentPageRask:1,//当前页数
				title: '' // 标题
      };
		},
    created () {
			let dictionaryValue = JSON.parse(sessionStorage.getItem('dictionaryValue'))
      dictionaryValue.map((item, index) => {
        if(item.typeValue == 'user_type') {
          this.formRaskSearch.state = item.paramParamList
        }
      })
			let params={
					query: this.formRaskSearch.typename,             //类型名称
					status: this.statusVal,            //状态
					page:this.currentPageRask,               //每页显示个数 (默认为10)
					size:this.pageSizeRask,                //当前页数(默认为1)
				}
			this.taskTypes(params)     //调用任务类型查询（查询参数）
		},
    methods:{
			handleEdit(index, row) {    //任务类型添加、编辑按钮
				this.dialogrask=true      //弹出框显示(显示true 隐藏false)
				if(row){
					this.id=row.id       //id
					this.name=row.name   //类型名称
					this.desc=row.desc   //描述
					this.onvalue=1       //编辑按钮1
					this.title = '编辑任务类型'
				}else{
					this.name=""
					this.desc=""
					this.onvalue=0       //添加按钮0
					this.title = '添加任务类型'
				}
      },
			onOk(){//确定按钮
				this.currentPageRask = 1
				this.pageSizeRask = 10
				if(this.onvalue == 1){   //判断：1为编辑按钮
					let params={
						id:this.id,
						name: this.name,
						desc: this.desc,
						page: this.currentPageRask,
						size: this.pageSizeRask
					}                    
					this.updateTaskType(params)
				} else if (this.onvalue == 0) {    //判断：不为1即为0 添加按钮
					let params={
						name: this.name,
						desc: this.desc,
						page: this.currentPageRask,
						size: this.pageSizeRask
					}       
					this.saveTaskType(params) 
				}
				this.dialogrask= false;  
			},
			//条件查询
			onQuery(){                                
				if (this.loading) {                     //判断加载返回
          return
        }
        this.loading = false                    //取消加载
				let params={
					query:this.formRaskSearch.typename,   //类型名称
					status:this.statusVal,     //状态
					page: this.currentPageRask,
					size: this.pageSizeRask
				}
				this.taskTypes(params)
			},
			handleEditStop(index, row) {             //启用停用按钮
				this.dialogstart=true                  //弹出框显示(显示true 隐藏false)
				this.id=row.id                         //id
				this.status=(row.status==0)?true:false //表格状态赋给启用停用状态  1停用  0启用
			},
			onOk2(){                                  //启动停用-确定按钮
				let params={
					id:this.id,                           //id
					state:(this.status==false)?1:0,       //启用停用状态
					type:'TASK',//TASK 是任务类型 COMMUNICATE 是沟通类型
					page: this.currentPageRask,
					size: this.pageSizeRask                           
				}
				this.startStopState(params)
				this.dialogstart=false                  //确定后 隐藏 启用停用弹出框
			},
			handleSizeChange (val) {                  //改变每页的条数
				this.pageSizeRask = val;
				this.currentPageRask = 1
				let params={
					query: this.formRaskSearch.typename,
					status: this.statusVal,
					page: this.currentPageRask,
					size: this.pageSizeRask
				}
				this.taskTypes(params);               //调用查询接口
			},
			handleCurrentChange (val) {  
				this.currentPageRask = val         //改变当前页
				let params={
					query: this.formRaskSearch.typename,
					status: this.statusVal,
					page: this.currentPageRask,
					size: this.pageSizeRask
				}
				this.taskTypes(params);               //调用查询接口
			},
			// 查询接口
			taskTypes(params){                     
				getTaskTypes(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data;
						this.totalRask = data.pageInfo.total
						this.raskTable = data.list
						this.loading = false
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			startStopState(params) {
				startStopState(params).then(res => {    //调用启用停用接口
					if(res.data.code==0){                 //code：0 成功 调用查询
						let params={
							query: this.formRaskSearch.typename,
							status: this.statusVal,
							page: this.currentPageRask,
							size: this.pageSizeRask
						}
						this.taskTypes(params)
					}else if(res.data.code==1){           //code 不为0  消息提示
						this.$message({
							message:res.data.msg
						})
					}
				})
			},
			saveTaskType(params) {
				saveTaskType(params).then(res => {   //调用添加接口
					if(res.data.code==0){              //code：0 成功 调用查询
							let params={
							query: this.formRaskSearch.typename,
							status: this.statusVal,
							page: this.currentPageRask,
							size: this.pageSizeRask
						}
						this.taskTypes(params)        
					}
				})
			},
			updateTaskType(params) {
				updateTaskType(params).then(res => {  //调用编辑接口
					if(res.data.code==0){               //code：0 成功 调用查询
						let params={
							query: this.formRaskSearch.typename,
							status: this.statusVal,
							page: this.currentPageRask,
							size:this.pageSizeRask,
						}
						this.taskTypes(params)           
					}
				})
			}
		}
  };
</script>
<style scoped>

</style>